/* Editorial layer: the visual language of the local DASAAR reference, expanded
   into a public-facing composition. The illustration is conceptual. */
:root{--editorial-violet:#7779ef;--editorial-ice:#bde7f4;--editorial-ink:#172842}
.topbar{position:relative;z-index:5;background:#101e35;border-color:#ffffff19}
.nav{height:82px}
.hero{background:#101e35}
.hero-grid{min-height:650px;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:stretch;gap:34px}
.hero-copy{padding:72px 12px 75px 0}
.hero-copy:before{background:linear-gradient(135deg,#152b49 3%,#252f60 58%,#3c3a75 100%)}
.hero-copy:after{right:-10px;bottom:55px;border-color:#c3bfff22;box-shadow:0 0 0 55px #c3bfff07,0 0 0 110px #c3bfff04}
.hero h1{font-weight:760;font-size:clamp(44px,5.15vw,69px);line-height:1.1;letter-spacing:-.045em}
.hero-lead{max-width:470px;font-size:16px}
.hero .button-lime{background:linear-gradient(115deg,#6568e7,#8177ee);box-shadow:0 12px 30px #6b69df30}
.hero-note{margin-top:44px}
.hero-visual{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;padding:58px 0 62px 0;isolation:isolate}
.hero-visual:before{content:"";position:absolute;inset:8% -20% 6% -12%;z-index:-1;background:radial-gradient(circle at 55% 45%,#6667bd42 0,transparent 56%)}
.hero-artwork{position:relative;width:100%;max-width:540px;aspect-ratio:1/1;overflow:hidden;border:1px solid #bec9ee31;border-radius:28px;box-shadow:0 26px 90px #070d1f72;background:#18284b}
.hero-artwork:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(0deg,#121c36d9,transparent);pointer-events:none}
.hero-artwork img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.art-label{position:absolute;z-index:1;left:22px;bottom:23px;display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid #d7ddf143;border-radius:14px;color:#bfccec;background:#1a2c4de8;box-shadow:0 12px 28px #050d1e50;font-size:9px;font-weight:750;letter-spacing:.12em;line-height:1.55;backdrop-filter:blur(14px)}
.art-label strong{font-size:13px;letter-spacing:0;color:#fff}
.art-label-icon{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:11px;background:linear-gradient(140deg,#8e8dfa,#69ccd8);color:white;font-size:22px}
.art-index{position:absolute;z-index:1;top:20px;right:20px;padding:7px 10px;border-radius:7px;background:#12203ab8;color:#d0d9f1;font-size:9px;font-weight:700;letter-spacing:.1em}
.visual-caption{position:absolute;right:3px;bottom:35px;margin:0;color:#a3b2cb;font-size:9px;letter-spacing:.12em}
.hero-bottom{border-top:1px solid #dbe3fa1a;padding-top:18px;padding-bottom:18px}
.intro{position:relative;overflow:hidden;background:#fff}
.intro:after{content:"";position:absolute;right:-95px;top:-115px;width:280px;height:280px;border:1px solid #e7e7fa;border-radius:50%;box-shadow:0 0 0 48px #f4f4ff,0 0 0 96px #fafaff;pointer-events:none}
.intro-grid{position:relative;z-index:1}
.intro h2 em,.section-heading h2 em,.contact h2 em{color:#6769db}
.areas{background:#f1f4fa}
.area-grid{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:18px}
.area-card{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;border-radius:19px;padding:25px;box-shadow:0 16px 48px #223b6510}
.area-people{background:linear-gradient(150deg,#182e50,#34356d);border-color:#283b63;color:#f6f8ff}
.area-people .area-number{color:#c2c8f7}.area-people .area-arrow{border-color:#ffffff33;color:#d0d0ff}
.area-people p{color:#c2cde0}
.area-art{height:156px;margin:22px 0 27px;border-radius:16px;background:linear-gradient(145deg,#edf0ff,#e2ebff)}
.area-people .area-art{background:linear-gradient(145deg,#4c569c88,#283e6d);border:1px solid #bdc7ff26}
.area-time .area-art{background:linear-gradient(140deg,#e2f7fb,#e5eafd)}
.area-growth .area-art{background:linear-gradient(140deg,#f0eaff,#eceeff)}
.area-art svg{width:180px;height:130px;max-width:85%;stroke:#626ad4;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 7px 10px #5b6fba1a)}
.area-people .area-art svg{stroke:#d7d5ff}.area-time .area-art svg{stroke:#3b8aab}.area-growth .area-art svg{stroke:#7b6cc3}
.area-card h3{font-size:20px;letter-spacing:-.02em}
.area-card p{font-size:14px;line-height:1.7;flex:1}
.area-caption{display:block;margin-top:25px;padding-top:17px;border-top:1px solid #dfe6f1;color:#7c8ca7;font-size:9px;font-weight:800;letter-spacing:.12em}
.area-people .area-caption{border-color:#ffffff27;color:#b9c3e3}
.approach{background:linear-gradient(135deg,#152b49,#30376d 68%,#48417d)}
.approach-list{background:#152744a3;box-shadow:0 20px 60px #101b3140}
.approach-list>div>span{width:32px;height:32px;display:grid;place-items:center;flex:none;border:1px solid #c5c8ff50;border-radius:10px;padding:0;background:#8a8df61c;color:#d5d3ff}
.contact{background:linear-gradient(180deg,#fff,#f8f9ff)}
.contact-star{display:inline-grid;place-items:center;width:56px;height:56px;border:1px solid #d6d8f7;border-radius:18px;background:#eeeefe;line-height:1}
@media(max-width:800px){
  .nav{height:72px}
  .hero-grid{display:flex;flex-direction:column;gap:0;padding:0;min-height:0}
  .hero-copy{padding:66px 20px 46px}
  .hero-copy:before{inset:0}
  .hero-copy:after{right:12px;bottom:30px}
  .hero h1{font-size:clamp(40px,10.5vw,55px)}
  .hero-note{margin-top:30px}
  .hero-visual{padding:26px 20px 54px;min-height:0}
  .hero-artwork{max-width:540px;border-radius:22px}
  .art-label{left:14px;bottom:14px;padding:10px 12px}
  .art-label strong{font-size:12px}
  .art-index{top:14px;right:14px;font-size:8px}
  .visual-caption{bottom:26px;right:22px}
  .area-grid{grid-template-columns:1fr}
  .area-art{height:145px}
  .area-card{padding:22px}
  .area-caption{margin-top:20px}
}
@media(max-width:380px){.hero-copy{padding-left:16px;padding-right:16px}.hero-visual{padding-left:16px;padding-right:16px}.hero h1{font-size:39px}.art-label{font-size:8px}.art-label strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Tabler Icons share the same line treatment as the local application. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui-icon,.feature-icon{display:inline-block;flex:none;width:18px;height:18px;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-up-right{transform:rotate(-135deg)}
.icon-up{transform:rotate(180deg)}
.area-arrow .ui-icon{width:16px;height:16px}
.note-icon .ui-icon,.art-label-icon .ui-icon{width:19px;height:19px}
.contact-star .ui-icon{width:29px;height:29px}
.area-art .feature-icon{width:76px;height:76px;stroke-width:1.75}
