/* ABR Safed Technology Services — responsive, lightweight single-page site */
:root{
  --navy:#101d35;--navy-2:#162943;--navy-3:#203a56;--red:#e44e43;--red-dark:#c63e35;
  --ink:#182338;--muted:#667387;--paper:#f7f8fa;--white:#fff;--line:#e4e8ee;
  --font:'Montserrat',Arial,sans-serif;--display:'Russo One','Montserrat',sans-serif;--dari:'Vazirmatn',sans-serif;
  --container:1160px;--shadow:0 20px 55px rgba(16,29,53,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:1000}
.skip-link:focus{left:12px}
.site-header{height:88px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(228,232,238,.85)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{font-family:var(--display);font-size:40px;line-height:.95;letter-spacing:-2.4px;color:var(--navy);white-space:nowrap}
.brand-dot{color:var(--red)}
.brand-copy{display:flex;flex-direction:column;gap:1px;border-left:1px solid #d9dee6;padding-left:12px}
.brand-dari{font-family:var(--dari);font-size:13px;font-weight:800;line-height:1.45;color:var(--navy);white-space:nowrap}
.brand-name{font-size:8px;font-weight:800;letter-spacing:1.45px;line-height:1.5;color:#4d5a6e;white-space:nowrap}
.primary-nav{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:700;color:#3b4759}
.primary-nav>a:not(.nav-contact):hover{color:var(--red)}
.nav-contact{background:var(--navy);color:#fff;padding:12px 17px;border-radius:3px;transition:background .2s}
.nav-contact span{color:#ff776c;margin-left:8px}.nav-contact:hover{background:var(--red)}
.menu-toggle{display:none}
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:630px}
.hero-grid{position:absolute;inset:0 0 0 40%;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.hero:before{content:"";position:absolute;width:570px;height:570px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-160px;top:-245px}
.hero:after{content:"";position:absolute;width:390px;height:390px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-70px;top:-155px}
.hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:45px;min-height:630px;padding-top:48px;padding-bottom:55px}
.eyebrow{display:flex;align-items:center;gap:11px;font-size:9px;font-weight:800;letter-spacing:2px;color:#c3d0df;line-height:1.5}
.eyebrow-line{display:inline-block;width:27px;height:2px;background:var(--red);flex:0 0 auto}
.hero h1{font-size:clamp(38px,4.4vw,61px);letter-spacing:-2.8px;line-height:1.12;margin:25px 0 20px;font-weight:800}
.hero h1 span,.vision-intro h2 span{color:#ff6b60}
.hero-lede{font-size:18px;font-weight:600;line-height:1.55;max-width:525px;color:#f2f5f9;margin:0 0 14px}
.hero-body{max-width:505px;color:#b9c5d4;font-size:13px;line-height:1.9;margin:0}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 18px;font-size:11px;font-weight:800;letter-spacing:.15px;border-radius:3px;transition:transform .2s,background .2s;color:#fff}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--red)}.button-primary:hover{background:var(--red-dark)}
.button-primary span,.button-quiet span,.button-light span{font-size:16px}
.button-quiet{border:1px solid rgba(255,255,255,.25);color:#fff}.button-quiet:hover{background:rgba(255,255,255,.08)}
.hero-proof{display:flex;align-items:center;gap:13px;margin-top:35px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);max-width:440px}
.proof-icon{font-family:var(--display);font-size:24px;color:#ff6b60;letter-spacing:-1px}
.hero-proof strong,.hero-proof small{display:block}.hero-proof strong{font-size:11px}.hero-proof small{font-size:9px;color:#aab8c9;margin-top:2px}
.hero-visual{height:450px;position:relative;max-width:540px;width:100%;margin-left:auto}
.visual-orbit{position:absolute;border:1px solid rgba(170,194,218,.18);border-radius:50%;left:12%;top:6%;width:75%;aspect-ratio:1}
.orbit-two{left:22%;top:16%;width:55%;border-style:dashed;opacity:.8}
.visual-panel{position:absolute;background:#fff;color:var(--navy);box-shadow:0 22px 45px rgba(0,0,0,.22);border-radius:5px}
.panel-solar{left:0;top:43px;width:58%;padding:15px 16px 7px;transform:rotate(-3deg);z-index:2}
.mini-label{font-size:8px;font-weight:800;letter-spacing:1.4px;color:#65768a}
.panel-solar svg{width:100%;display:block;margin-top:4px}
.panel-circuit{right:0;top:105px;width:41%;height:155px;background:#1b3049;border:1px solid #46617b;padding:17px;color:#fff;transform:rotate(4deg);z-index:3}
.circuit-chip{width:56px;height:45px;margin:0 auto 14px;border:1px solid #f06b60;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:4px;position:relative}
.circuit-chip:before,.circuit-chip:after{content:"";position:absolute;width:68px;height:1px;background:#63829e;left:-7px}
.circuit-chip:before{top:9px}.circuit-chip:after{bottom:9px}
.circuit-chip span{height:21px;width:5px;background:#f06b60;border-radius:1px}
.circuit-lines{position:absolute;bottom:15px;left:18px;right:18px;display:flex;gap:7px;align-items:flex-end}
.circuit-lines i{display:block;height:3px;background:#6f91ac;flex:1}.circuit-lines i:nth-child(2){height:8px}.circuit-lines i:nth-child(4){height:13px}.circuit-lines b{width:5px;height:5px;background:#f06b60;border-radius:50%;margin-bottom:-1px}
.panel-digital{left:17%;bottom:31px;width:66%;height:145px;border:1px solid #dce3ea;padding:13px 15px;z-index:4;transform:rotate(2deg)}
.digital-top{display:flex;gap:4px;align-items:center;border-bottom:1px solid #e8ecf0;padding-bottom:9px}
.digital-top>span{height:5px;width:5px;border-radius:50%;background:#c8d1dc}.digital-top>span:first-child{background:var(--red)}
.digital-top b{font-size:7px;letter-spacing:1.1px;margin-left:auto;color:#66758a}
.digital-bars{display:flex;align-items:flex-end;gap:9px;height:65px;padding:8px 8px 0;border-bottom:1px solid #dce3ea}
.digital-bars i{display:block;width:12%;background:#dce5ec;border-radius:2px 2px 0 0;height:35%}.digital-bars i:nth-child(2){height:57%;background:#8fa9bf}.digital-bars i:nth-child(3){height:44%}.digital-bars i:nth-child(4){height:82%;background:var(--red)}.digital-bars i:nth-child(5){height:68%;background:#6e91ad}
.digital-caption{font-size:8px;font-weight:700;color:#63758a;margin-top:8px}
.visual-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#b6c5d5;letter-spacing:.2px}
.caption-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ef665b;margin-right:8px;box-shadow:0 0 0 4px rgba(228,78,67,.15)}
.hero-bottom-line{height:4px;background:linear-gradient(90deg,var(--red) 0 20%,#273e57 20% 100%)}
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.trust-inner>span{font-size:8px;font-weight:800;letter-spacing:1.8px;color:#7b8797}
.trust-inner>div{font-size:10px;font-weight:700;color:#36445a;white-space:nowrap}
.strip-symbol{color:var(--red);font-size:9px;margin-right:7px}
.section{padding:105px 0}
.solutions-section{background:var(--paper)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:43px}
.dark-eyebrow{color:#738095}
.section-heading h2,.about-copy h2,.contact-heading h2{font-size:clamp(32px,3.4vw,45px);line-height:1.2;letter-spacing:-1.7px;margin:17px 0 0;color:var(--navy)}
.section-heading h2 span,.about-copy h2 span,.contact-heading h2 span{color:var(--red)}
.section-heading>p{max-width:390px;color:var(--muted);font-size:12px;line-height:1.9;margin:0 0 5px}
.solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.solution-card{min-height:360px;background:#fff;border:1px solid #e7ebf0;padding:22px 20px 20px;display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s}
.solution-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d4dce6}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.card-number{font-size:8px;font-weight:800;letter-spacing:1.2px;color:#8792a1}
.card-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:4px;background:#f7e9e7;color:var(--red)}
.card-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.solution-automation .card-icon{background:#e9eff5;color:#244c70}.solution-software .card-icon{background:#eef1f8;color:#485e91}.solution-partner .card-icon{background:#e9f2ec;color:#407657}
.solution-card h3{font-size:16px;line-height:1.35;letter-spacing:-.3px;color:var(--navy);margin:0 0 11px}
.solution-card p{font-size:10px;line-height:1.85;color:#697689;margin:0 0 14px}
.solution-card ul{padding:0 0 0 14px;margin:0 0 23px;color:#4e5c70;font-size:9px;line-height:2}
.solution-card li::marker{color:var(--red)}
.text-link{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #edf0f4;padding-top:14px;font-size:9px;font-weight:800;color:var(--navy)}
.text-link span{color:var(--red);font-size:15px;transition:transform .2s}.text-link:hover span{transform:translateX(3px)}
.service-note{font-size:9px;color:#8792a1;margin:18px 0 0}
.about-section{background:#fff}
.about-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:85px}
.about-graphic{height:435px;position:relative;background:var(--navy);overflow:hidden;border-radius:3px}
.graphic-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:30px 30px;opacity:.4}
.graphic-ring{position:absolute;width:310px;height:310px;left:50%;top:45%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.24);border-radius:50%}
.ring-b{width:225px;height:225px;border-style:dashed;border-color:rgba(228,78,67,.65)}
.graphic-center{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column}
.graphic-center span{font-family:var(--display);font-size:62px;letter-spacing:-4px;color:#fff}
.graphic-center i{height:3px;width:43px;background:var(--red);margin:7px 0 13px}
.graphic-center small{font-size:8px;font-weight:800;letter-spacing:2px;line-height:1.7;text-align:center;color:#c4d0dd}
.graphic-tag{position:absolute;display:flex;gap:9px;align-items:center;background:#fff;padding:9px 12px;box-shadow:0 8px 22px rgba(0,0,0,.15);font-size:8px;line-height:1.4;font-weight:700;color:#304057}
.graphic-tag b{font-family:var(--display);font-size:16px;color:var(--red)}
.tag-one{top:37px;left:20px}.tag-two{right:15px;top:175px}.tag-three{left:30px;bottom:38px}
.about-copy h2{margin-bottom:22px}
.about-copy p{font-size:12px;line-height:2;color:#687589;margin:0 0 15px}
.about-copy p.lead{font-size:14px;line-height:1.8;color:#344257;font-weight:600}
.experience-callout{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.experience-number{font-family:var(--display);font-size:39px;letter-spacing:-2px;line-height:1;color:var(--red)}
.experience-number span{font-size:24px}
.experience-callout strong,.experience-callout small{display:block}.experience-callout strong{font-size:11px;color:var(--navy)}.experience-callout small{font-size:9px;color:#8390a0;margin-top:4px}
.vision-section{background:var(--navy);color:#fff;padding:85px 0}
.vision-layout{display:grid;grid-template-columns:1.05fr .95fr .95fr;gap:28px;align-items:stretch}
.vision-intro{padding:12px 20px 10px 0}
.vision-intro h2{font-size:clamp(30px,3vw,40px);line-height:1.25;letter-spacing:-1.5px;margin:19px 0}
.vision-intro p{font-size:11px;line-height:1.9;color:#b4c2d2;max-width:310px}
.purpose-card{padding:26px 25px 22px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);min-height:230px}
.purpose-index{font-family:var(--display);font-size:13px;color:#ff7065;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:15px}
.purpose-card h3{font-size:18px;margin:19px 0 10px}
.purpose-card p{font-size:10px;line-height:1.95;color:#b8c5d4;margin:0}
.partner-section{background:#e94f44;color:#fff;overflow:hidden}
.partner-layout{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:65px}
.partner-content h2{font-size:clamp(34px,4vw,50px);line-height:1.18;letter-spacing:-2px;margin:20px 0}
.partner-content h2 span{color:var(--navy)}
.partner-content>p{font-size:12px;line-height:1.95;color:#fff0ee;max-width:560px}
.button-light{background:#fff;color:var(--navy);margin-top:17px}.button-light:hover{background:#f7e8e6}
.partner-visual{height:330px;position:relative;border:1px solid rgba(255,255,255,.28);background:rgba(16,29,53,.08);overflow:hidden}
.map-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px);background-size:25px 25px;opacity:.7}
.map-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:9px;z-index:2}
.map-node small{font-size:8px;letter-spacing:1.3px;line-height:1.6;font-weight:800;text-align:center}
.node-global{left:9%;top:22%}.node-market{right:8%;bottom:20%}.node-dot{display:block;width:17px;height:17px;background:var(--navy);border:4px solid rgba(255,255,255,.65);border-radius:50%;box-shadow:0 0 0 7px rgba(255,255,255,.12)}
.node-abr{left:43%;top:42%}.node-core{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--navy);font-family:var(--display);font-size:25px;letter-spacing:-1px;box-shadow:0 0 0 10px rgba(255,255,255,.13)}
.map-connect{position:absolute;height:1px;background:rgba(255,255,255,.85);transform-origin:left center;z-index:1}
.connect-a{left:20%;top:32%;width:35%;transform:rotate(18deg)}.connect-b{left:53%;top:55%;width:34%;transform:rotate(32deg)}
.partner-visual-caption{position:absolute;left:18px;bottom:15px;font-size:8px;line-height:1.6;color:#ffe0dd;font-weight:600}
.contact-section{background:var(--paper)}
.contact-heading{text-align:center;max-width:610px;margin:0 auto 40px}
.contact-heading .eyebrow{justify-content:center}
.contact-heading h2{margin:17px 0}
.contact-heading>p{font-size:12px;line-height:1.9;color:#6b788a;margin:0 auto;max-width:480px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.contact-card{background:#fff;border:1px solid #e6eaf0;min-height:190px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,border-color .2s,box-shadow .2s}
a.contact-card:hover{transform:translateY(-4px);border-color:#d4dce6;box-shadow:var(--shadow)}
.contact-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#f8e9e7;color:var(--red);font-size:20px;border-radius:4px;margin-bottom:17px}
.contact-icon-whatsapp{background:#e7f3eb;color:#278a52}
.contact-label{font-size:8px;font-weight:800;letter-spacing:1.6px;color:#8792a1;margin-bottom:5px}
.contact-card strong{font-size:14px;color:var(--navy);word-break:break-word}
.contact-action{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border-top:1px solid #edf0f4;margin-top:auto;padding-top:13px;font-size:9px;font-weight:700;color:#667387}
.contact-action b{font-size:15px;color:var(--red)}
.site-footer{background:#0b1628;color:#fff}
.footer-main{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-brand .brand-mark{font-size:34px;color:#fff}
.footer-brand .brand-copy{border-color:rgba(255,255,255,.2)}
.footer-brand .brand-dari{color:#fff}.footer-brand .brand-name{color:#aab7c7}
.footer-main>p{font-size:10px;color:#aab7c7;margin:0}
.back-top{font-size:9px;font-weight:700;color:#fff;border-bottom:1px solid #e44e43;padding-bottom:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);min-height:53px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:8px;color:#8594a8}
@media(max-width:1050px){
  .primary-nav{gap:20px}.hero-layout{gap:20px}.hero-visual{transform:scale(.94);transform-origin:center right}
  .solution-grid{grid-template-columns:repeat(2,1fr)}.solution-card{min-height:310px}
  .about-layout{gap:50px}.vision-layout{grid-template-columns:1fr 1fr}.vision-intro{grid-column:1/-1;padding:0}
}
@media(max-width:760px){
  html{scroll-padding-top:74px}.container{width:min(var(--container),calc(100% - 36px))}
  .site-header{height:74px}.brand{gap:8px}.brand-mark{font-size:34px}.brand-copy{padding-left:8px}.brand-dari{font-size:11px}.brand-name{font-size:7px;letter-spacing:1px}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #e2e7ed;background:#fff;border-radius:3px;cursor:pointer}
  .menu-toggle span{display:block;width:18px;height:2px;background:var(--navy);transition:transform .2s}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:73px;background:#fff;padding:18px 22px 22px;border-bottom:1px solid var(--line);box-shadow:0 15px 25px rgba(16,29,53,.08);align-items:stretch;gap:0;flex-direction:column}
  .primary-nav.open{display:flex}.primary-nav>a{padding:13px 6px}.primary-nav .nav-contact{text-align:center;margin-top:8px}
  .hero-layout{grid-template-columns:1fr;min-height:auto;padding-top:66px;padding-bottom:28px;gap:5px}
  .hero h1{font-size:clamp(39px,10vw,57px);letter-spacing:-2px}.hero-lede{font-size:16px}.hero-body{font-size:12px}
  .hero-visual{height:350px;width:min(100%,460px);margin:10px auto 0;transform:none}
  .panel-solar{top:30px}.panel-circuit{top:77px}.panel-digital{bottom:25px}.visual-caption{font-size:8px}
  .trust-inner{padding-top:22px;padding-bottom:22px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .trust-inner>span{grid-column:1/-1}.trust-inner>div{white-space:normal}
  .section{padding:72px 0}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:18px}
  .solution-grid{gap:12px}.solution-card{padding:18px 15px;min-height:335px}.solution-card h3{font-size:14px}.solution-card p{font-size:10px}
  .about-layout{grid-template-columns:1fr;gap:42px}.about-graphic{height:360px;max-width:520px;width:100%;margin:auto}
  .about-copy h2{font-size:36px}.vision-layout{grid-template-columns:1fr;gap:15px}.vision-intro{grid-column:auto;margin-bottom:15px}.purpose-card{min-height:auto}
  .partner-layout{grid-template-columns:1fr;gap:35px}.partner-visual{height:290px}
  .contact-grid{grid-template-columns:1fr;gap:12px}.contact-card{min-height:165px}
  .footer-main{padding-top:28px;padding-bottom:25px;align-items:flex-start;flex-direction:column;gap:18px}
  .footer-bottom{padding-top:15px;padding-bottom:15px;align-items:flex-start;flex-direction:column;gap:5px}
}
@media(max-width:420px){
  .container{width:calc(100% - 30px)}
  .brand-mark{font-size:30px;letter-spacing:-2px}.brand-dari{font-size:10px}.brand-name{font-size:6px;letter-spacing:.8px}
  .hero-actions{align-items:stretch;flex-direction:column}.hero-actions .button{width:100%}
  .hero-visual{height:310px}.panel-solar{width:62%;left:0}.panel-circuit{width:43%;right:-1%;height:140px}.panel-digital{width:72%;left:12%;height:132px}
  .visual-caption{font-size:7px;letter-spacing:0}
  .solution-grid{grid-template-columns:1fr}.solution-card{min-height:unset}.solution-card ul{margin-bottom:20px}
  .about-graphic{height:325px}.graphic-ring{width:255px;height:255px}.ring-b{width:185px;height:185px}.graphic-center span{font-size:52px}.tag-one{top:20px;left:10px}.tag-two{right:8px;top:150px}.tag-three{left:12px;bottom:20px}
  .section-heading h2,.contact-heading h2{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* ABR horizontal logo */
.brand-logo {
  display: block;
  width: 350px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}