/* styles.css */
@font-face{font-family:"Gilroy";src:url("./fonts/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Gilroy";src:url("./fonts/Gilroy-Regular.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Gilroy";src:url("./fonts/Gilroy-Bold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Gilroy";src:url("./fonts/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Gilroy";src:url("./fonts/Gilroy-Bold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap;}

:root{--text:#111;--muted:#5f5f5f;--border:#111;--radius:28px;--container:1280px;--panel-image:none;--media-max:640px;--landscape-a-max:820px;--landscape-b-max:940px;--portrait-max:760px;--gap-x:56px;--gap-y:96px;--hero-extra-offset:100px;--gs-width:164px;--mini-panel-inset:18px;}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:"Gilroy",-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:weight style;}
.page-wrap{padding:16px;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:28px 24px;}

.panel{position:relative;min-height:calc(100vh - 32px);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 22px 70px rgba(0,0,0,0.14),0 6px 16px rgba(0,0,0,0.10);background:#fff;}
.panel .panel-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:#000;}
.panel .panel-bg__video{width:100%;height:100%;object-fit:cover;display:block;}
.panel>.topbar,.panel>.hero{position:relative;z-index:2;}

.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding-top:28px;}
.brand{display:flex;align-items:flex-end;gap:12px;text-decoration:none;color:inherit;pointer-events:none;}
.brand img{width:34px;height:34px;object-fit:contain;display:block;}
.brand-name{font-weight:700;font-size:22px;line-height:1;}

.nav{display:flex;align-items:center;gap:16px;}
.navlink{color:inherit;text-decoration:none;font-weight:700;font-size:16px;}
.nav-actions{display:flex;align-items:center;gap:16px;}

.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:transparent;color:inherit;text-decoration:none;padding:12px 20px;border-radius:999px;font-weight:700;line-height:1;}
.btn--gs{white-space:nowrap;min-width:var(--gs-width);text-align:center;}
.btn.btn-outline.disabled{border-width:0.75px;}
.btn-outline:hover{box-shadow:0 0 0 1px var(--border) inset;}
.disabled{pointer-events:none;cursor:default;}

.hero{text-align:center;padding-top:calc(48px + var(--hero-extra-offset));padding-bottom:100px;}
.hero-title{font-size:50px;line-height:1.17;letter-spacing:-0.5px;margin:0.3em 0 0.2em;font-weight:800;}
.hero-subtitle{font-size:20px;color:#000;margin:14px 0 34px;}
.br-lg{display:none;}

.twin-grid{width:min(1260px,calc(100% - 48px));margin:-52px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative;z-index:5;padding:0 0 4px;}
.twin-card{border-radius:calc(var(--radius) - 10px);overflow:hidden;aspect-ratio:16/10;min-height:240px;box-shadow:0 18px 55px rgba(0,0,0,0.12),0 6px 18px rgba(0,0,0,0.10);}
.twin-card--1{background:url("index/feature-highlight-1.png") center/cover no-repeat;}
.twin-card--2{background:url("index/feature-highlight-2.png") center/cover no-repeat;}

.bridge-titles{width:min(1260px,calc(100% - 48px));margin:0 auto;text-align:center;padding:0 24px;}
.twin-grid+.bridge-titles{margin-top:96px;}
.bridge-titles+.panel--narrow{margin-top:96px;}
.bridge-titles .madefor__title{margin:0 0 6px;}
.bridge-subtitle.split-subtitle{margin:0 auto;}

/* ===== RESPONSIVE STYLES ===== */
.panel--narrow{
  width:min(1260px,calc(100% - 48px));
  margin:28px auto;
  min-height:auto;
}
.panel--split+.panel--split{margin-top:44px;}
.panel.panel--split{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:500px;
  display:flex;
  flex-direction:column;
}
.panel--split .split-area{
  position:relative;
  width:100%;
  padding:32px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  flex-shrink:0;
}
.split-head.container{padding:0 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;pointer-events:auto;}
.split-title{margin:0 0 10px;font-weight:800;letter-spacing:-0.2px;font-size:clamp(26px,3vw,36px);line-height:1.22;}
.split-subtitle{margin:0;color:var(--muted);font-size:18px;max-width:70ch;}
.panel--split .panel-media{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--mini-panel-inset) var(--mini-panel-inset) calc(var(--mini-panel-inset) + 12px);
  background:transparent;
  min-height:400px;
}
.panel--split .panel-media__mini{position:relative;width:min(1180px,calc(100% - var(--mini-panel-inset) * 2));aspect-ratio:16/9;border-radius:calc(var(--radius) - 6px);overflow:hidden;background:var(--panel-image) center/cover no-repeat;background-size:cover;box-shadow:0 16px 50px rgba(0,0,0,0.10),0 4px 12px rgba(0,0,0,0.08);flex-shrink:0;}

.panel--automated-accounting{--panel-image:url("index/automated-accounting-preview.png");}
.panel--document-creation{--panel-image:url("index/document-creation-preview.png");}
.panel--business-learning{--panel-image:url("index/business-learning-preview.png");}

.madefor{padding-top:56px;padding-bottom:96px;}
.madefor__title{margin:10px 0 32px;text-align:center;font-weight:800;letter-spacing:-0.2px;font-size:clamp(28px,3.2vw,36px);}
.feature{display:grid;grid-template-columns:0.9fr 1.1fr;align-items:center;column-gap:var(--gap-x);row-gap:24px;margin-top:var(--gap-y);}
.feature--gap-lg{margin-top:calc(var(--gap-y) * 1.15);}
.feature--reverse{grid-template-columns:1.1fr 0.9fr;}
.feature--reverse .feature__text{order:2;}
.feature--reverse .feature__media{order:1;}
.feature__text--right{text-align:left;}
.feature__heading{margin:0 0 10px;font-weight:800;letter-spacing:-0.2px;font-size:clamp(20px,2.2vw,26px);line-height:1.25;}
.feature__desc{margin:0;color:var(--muted);font-size:18px;max-width:60ch;}
.feature__media{justify-self:center;width:100%;}
.img{display:block;width:100%;max-width:var(--media-max);height:auto;filter:drop-shadow(0 2px 0 rgba(0,0,0,0.02));}
.img--landscape-a{max-width:var(--landscape-a-max);}
.img--landscape-b{max-width:var(--landscape-b-max);}
.img--portrait{max-width:var(--portrait-max);}

@media (max-width:1024px){
  .hero-title{font-size:44px;}
  .hero-subtitle{font-size:20px;}
  :root{--gap-y:84px;}
  .feature{grid-template-columns:1fr 1fr;column-gap:40px;}
  .feature--reverse{grid-template-columns:1fr 1fr;}
  .panel.panel--split{
    min-height:450px;
  }
  .panel--split .panel-media{
    min-height:350px;
  }
}

@media (max-width:760px){
  .container{padding-inline:16px;}
  .brand-name{font-size:20px;}
  .hero-title{font-size:36px;}
  .hero-subtitle{font-size:18px;}
  :root{--hero-extra-offset:84px;--gap-y:64px;--mini-panel-inset:12px;}
  .br-lg{display:inline;}
  .twin-grid{width:100%;margin-top:-36px;grid-template-columns:1fr;gap:12px;}
  .twin-card{aspect-ratio:16/10;min-height:200px;}
  .bridge-titles{width:100%;padding:0 16px;}
  .twin-grid+.bridge-titles{margin-top:64px;}
  .bridge-titles+.panel--narrow{margin-top:64px;}
  .bridge-titles .madefor__title{margin:0 0 4px;}
  .panel--narrow{width:100%;margin:20px 0;}
  .panel--split+.panel--split{margin-top:28px;}
  .feature{grid-template-columns:1fr;text-align:left;}
  .feature--reverse{grid-template-columns:1fr;}
  .feature--reverse .feature__text{order:1;}
  .feature--reverse .feature__media{order:2;}
  .feature__media{margin-top:16px;}
  .img{max-width:100%;}
  .madefor{padding-top:40px;padding-bottom:72px;}
  .panel.panel--split{
    min-height:380px;
  }
  .panel--split .split-area{
    padding:24px 16px;
  }
  .panel--split .panel-media{
    min-height:280px;
    padding:var(--mini-panel-inset) var(--mini-panel-inset) calc(var(--mini-panel-inset) + 8px);
  }
}