/* ============================================================
   Srijan Software Services — Design System
   Editorial, warm, generous whitespace (Eternal.com inspired)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#12130f;
  --ink-soft:#4a4a42;
  --paper:#faf7f0;
  --paper-alt:#f1ece0;
  --card:#ffffff;
  --line:#e6ddc9;
  --accent:#e0552b;
  --accent-dark:#b5401e;
  --accent-soft:#fbe6da;
  --teal:#1f6f5c;
  --navy:#101820;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --shadow:0 20px 60px -25px rgba(18,19,15,0.25);
  --maxw:1240px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:'Fraunces',serif; margin:0; line-height:1.08; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }

section{ padding:112px 0; }
.section-tight{ padding:80px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:18px;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--accent);
}

.section-head{ max-width:680px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,4vw,44px); font-weight:600; }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:17px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--accent); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-ghost{ background:transparent; color:var(--ink); padding:8px 0; border-radius:0; }
.btn-ghost .arrow{ transition:transform .25s ease; }
.btn-ghost:hover .arrow{ transform:translateX(5px); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,240,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; }
.brand-mark{
  width:38px; height:38px;
  object-fit:contain;
  flex-shrink:0;
}
.main-nav{ display:flex; align-items:center; gap:40px; }
.main-nav a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); position:relative; padding:4px 0; }
.main-nav a:hover, .main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent);
}
.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); color:var(--ink); position:relative;
}
.icon-btn:hover{ border-color:var(--ink); }
.badge{
  position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  align-items:center; justify-content:center; cursor:pointer; background:transparent;
}
.mobile-menu{
  position:fixed; inset:84px 0 0 0; background:var(--paper); z-index:99;
  transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .25s ease;
  padding:36px 32px; display:flex; flex-direction:column; gap:4px;
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:'Fraunces',serif; font-size:26px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:500; }
.mobile-menu .btn{ margin-top:24px; align-self:flex-start; }

/* ---------- Hero ---------- */
.hero{ padding:96px 0 80px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.hero h1{ font-size:clamp(40px,5.4vw,68px); font-weight:600; margin-top:20px; }
.hero-lead{ margin-top:26px; font-size:18px; color:var(--ink-soft); max-width:560px; }
.hero-stats{ display:flex; gap:40px; margin-top:44px; }
.hero-stats div strong{ display:block; font-family:'Fraunces',serif; font-size:28px; }
.hero-stats div span{ font-size:13px; color:var(--ink-soft); }
.hero-visual{
  position:relative; aspect-ratio:1/1.02; border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--navy) 0%,#1c2a36 45%,var(--accent) 130%);
  overflow:hidden; box-shadow:var(--shadow);
}
.hero-visual .grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:38px 38px;
}
.hero-visual .orb{
  position:absolute; border-radius:50%; filter:blur(2px);
}
.hero-visual .float-card{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px); border-radius:14px; padding:14px 16px; color:#fff;
}
.hero-slideshow{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero-slideshow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:floatSlideshow 12s infinite;
}
.hero-slideshow img:nth-child(1){ animation-delay:0s; }
.hero-slideshow img:nth-child(2){ animation-delay:3s; }
.hero-slideshow img:nth-child(3){ animation-delay:6s; }
.hero-slideshow img:nth-child(4){ animation-delay:9s; }
@keyframes floatSlideshow{
  0%, 100%{ opacity:0; }
  4%, 21%{ opacity:1; }
  25%{ opacity:0; }
}

/* ---------- Cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:34px 30px; display:flex; flex-direction:column; box-sizing:border-box;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-dark); margin-bottom:22px;
}
.card h3{ font-size:21px; font-weight:600; margin-bottom:12px; }
.card p{ color:var(--ink-soft); font-size:14.8px; flex-grow:1; }
.card ul{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.card ul li{ font-size:14px; color:var(--ink-soft); padding-left:18px; position:relative; }
.card ul li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.card .card-cta{ margin-top:22px; }
.card.card-dark{ background:var(--navy); border-color:var(--navy); color:#fff; }
.card.card-dark p{ color:#c4cbd1; }
.card.card-dark .card-icon{ background:rgba(255,255,255,.12); color:#fff; }
.tag-soon{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:5px 10px; border-radius:999px; margin-bottom:14px; align-self:flex-start;
}

/* ---------- Capabilities ---------- */
.card-capability:hover{
  background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-6px); box-shadow:var(--shadow);
}
.card-capability:hover p{ color:#c4cbd1; }
.card-capability:hover .card-icon{ background:var(--accent); color:#fff; }

/* ---------- Card carousel ---------- */
.carousel{ position:relative; }
.carousel-track{
  display:flex; align-items:stretch; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:4px; -ms-overflow-style:none; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .card{
  flex:0 0 calc((100% - 56px) / 3); width:calc((100% - 56px) / 3); scroll-snap-align:start;
  transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.carousel-track .card.is-dimmed{ opacity:.4; transform:scale(.96); }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow); opacity:.55; overflow:hidden; isolation:isolate;
  cursor:pointer; color:inherit;
  transition:opacity .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1),
    border-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.carousel-nav::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--ink);
  transform:scale(0); transition:transform .35s cubic-bezier(.4,0,.2,1); z-index:-1;
}
.carousel-nav svg{ position:relative; }
.carousel-nav.prev{ left:-22px; }
.carousel-nav.next{ right:-22px; }
.carousel-nav:hover{ opacity:1; color:#fff; border-color:var(--ink); transform:translateY(-50%) scale(1.08); }
.carousel-nav:hover::before{ transform:scale(1); }
.carousel-nav:disabled{ opacity:.2; cursor:default; }
.carousel-nav:disabled:hover{ color:inherit; border-color:var(--line); transform:translateY(-50%); }
.carousel-nav:disabled:hover::before{ transform:scale(0); }

/* ---------- Trusted clients ---------- */
.section-head--tight{ font-size:clamp(22px,2.6vw,32px) !important; }
@media (max-width:480px){
  .section-head--tight{ font-size:clamp(19px,5.5vw,24px) !important; white-space:normal; }
}

.marquee{
  overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--line); mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:1px;
  animation:marquee-scroll 35s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-cell{
  background:var(--card); flex:0 0 auto; width:200px; height:100px;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.marquee-cell img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }

@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (max-width:720px){
  .marquee-cell{ width:150px; height:80px; padding:14px; }
}

/* ---------- Split / About ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split-visual{
  aspect-ratio:4/5; border-radius:var(--radius-lg); background:var(--paper-alt);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.split ul.points{ margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.split ul.points li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); }
.check{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy); color:#fff; border-radius:var(--radius-lg);
  padding:72px 64px; display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.cta-band h2{ color:#fff; font-size:clamp(26px,3.2vw,38px); font-weight:600; max-width:520px; }
.cta-band p{ color:#c4cbd1; margin-top:12px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:#c4cbd1; padding:80px 0 32px; margin-top:40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand p{ margin-top:16px; color:#9aa3ab; font-size:14.5px; max-width:280px; }
.footer-col h4{ font-family:'Inter',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#fff; font-weight:700; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14.5px; color:#9aa3ab; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; color:#7c858d; }
.social-row{ display:flex; gap:14px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{ background:var(--accent); border-color:var(--accent); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:72px 0 56px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(34px,4.6vw,52px); font-weight:600; margin-top:16px; max-width:760px; }
.page-hero h1.offerings-title{ font-size:clamp(20px,2.6vw,34px); white-space:nowrap; max-width:none; }
.page-hero p{ margin-top:18px; color:var(--ink-soft); font-size:17px; max-width:620px; }
.breadcrumb{ font-size:13px; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--accent-dark); }

/* ---------- Product grid (shop) ---------- */
.filter-row{ display:flex; gap:12px; margin-bottom:44px; flex-wrap:wrap; }
.filter-chip{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; font-weight:600;
  cursor:pointer; background:var(--card); transition:all .2s ease;
}
.filter-chip.active, .filter-chip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.product-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.product-thumb{
  aspect-ratio:4/3; background:linear-gradient(150deg,var(--paper-alt),var(--accent-soft));
  display:flex; align-items:center; justify-content:center; position:relative;
}
.product-thumb .glyph{ font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--accent-dark); letter-spacing:.02em; text-align:center; padding:0 20px; }
.product-pill{ position:absolute; top:14px; left:14px; background:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.product-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.product-body h3{ font-size:18px; font-weight:600; }
.product-body p{ font-size:14px; color:var(--ink-soft); flex-grow:1; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; gap:10px; }
.price{ font-weight:700; font-size:16px; }
.price span{ font-weight:500; font-size:12.5px; color:var(--ink-soft); }
.price s{ font-weight:500; font-size:13px; color:var(--ink-soft); margin-right:6px; }

.qty-selector{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.qty-selector button{
  width:30px; height:30px; border:0; background:var(--paper-alt); color:var(--ink); font-size:16px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
}
.qty-selector button:hover{ background:var(--ink); color:var(--paper); }
.qty-selector .qty-count{ width:30px; text-align:center; font-size:13.5px; font-weight:600; }
.product-cart-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; }
.contact-info-card{
  background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:44px; height:fit-content;
}
.contact-info-card h3{ color:#fff; font-size:22px; margin-bottom:8px; }
.contact-info-card p{ color:#c4cbd1; font-size:14.5px; margin-bottom:28px; }
.contact-row{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); }
.contact-row:first-of-type{ border-top:none; }
.contact-row .ic{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row div strong{ display:block; font-size:14px; }
.contact-row div span{ font-size:13.5px; color:#c4cbd1; }

.form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-family:inherit; font-size:14.5px;
  background:var(--paper); color:var(--ink); resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); background:#fff; }

/* ---------- Careers ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.value-card{ text-align:center; padding:30px 18px; }
.value-card .num{ font-family:'Fraunces',serif; font-size:34px; color:var(--accent); }
.job-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.job-row{ background:var(--card); padding:26px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.job-row h4{ font-family:'Inter',sans-serif; font-weight:700; font-size:16.5px; }
.job-meta{ display:flex; gap:10px; margin-top:8px; }
.job-meta span{ font-size:12px; color:var(--ink-soft); background:var(--paper-alt); padding:4px 10px; border-radius:999px; }

/* ---------- Modal (product detail) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(16,24,32,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--card); border-radius:var(--radius-lg); max-width:640px; width:100%;
  max-height:86vh; overflow-y:auto; padding:44px; position:relative;
  transform:translateY(16px) scale(.98); transition:transform .25s ease;
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal-close:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-64{ margin-top:64px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .split, .contact-grid{ grid-template-columns:1fr; }
  .card-grid, .card-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:repeat(3,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .carousel-track .card{ flex-basis:calc((100% - 28px) / 2); }
}
@media (max-width: 720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .icon-btn, .header-actions .btn-primary{ display:none; }
  .site-header .container{ height:72px; }
  .brand{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-menu{ top:72px; }
  section{ padding:72px 0; }
  .card-grid, .card-grid.cols-4, .product-grid{ grid-template-columns:1fr; }
  .page-hero h1.offerings-title{ white-space:normal; font-size:clamp(22px,6vw,30px); }
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .carousel-track .card{ flex-basis:88%; }
  .carousel-nav{ width:36px; height:36px; }
  .carousel-nav.prev{ left:4px; }
  .carousel-nav.next{ right:4px; }
  .cta-band{ flex-direction:column; text-align:center; padding:48px 28px; }
  .form-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr 1fr; }
  .job-row{ flex-direction:column; align-items:flex-start; }
}