/* NINEWORKS DEVELOP LANDING — 2026-09-22 */

.develop-page{
  --develop-orange:var(--nw-accent,#ff5a1f);
  --develop-orange-soft:var(--nw-accent-soft,#fff2ec);
  --develop-line:var(--nw-ui-line,#e7e7e2);
  --develop-soft:var(--nw-ui-bg,#fafaf8);
  --develop-text:#171717;
  --develop-muted:#6b6b67;
  --develop-card-radius:20px;
  --develop-card-gap:12px;
  --develop-card-border:1px solid var(--develop-line);
}
.develop-page main{background:#fff;color:var(--develop-text)}
.develop-page .develop-center{text-align:center}
.develop-page .develop-center>.eyebrow{margin-left:auto;margin-right:auto}
.develop-page .develop-center h1,
.develop-page .develop-center h2,
.develop-page .develop-center p{margin-left:auto;margin-right:auto}

/* Hero */
.develop-hero{padding:96px 0 78px;border-bottom:1px solid var(--develop-line)}
.develop-hero .eyebrow{margin-bottom:24px;color:var(--develop-orange)!important}
.develop-hero h1{max-width:980px;margin:0 auto;font-size:clamp(46px,4.8vw,72px);font-weight:650;line-height:1.08;letter-spacing:-.055em;word-break:keep-all;text-wrap:balance}
.develop-hero__lead{max-width:800px;margin:28px auto 0;color:var(--develop-muted);font-size:18px;line-height:1.78;word-break:keep-all}
.develop-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:34px}
.develop-button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:22px;padding:0 22px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.develop-page .develop-button{border-radius:16px!important;overflow:hidden!important}
.develop-button:hover{transform:translateY(-1px)}
.develop-button--primary{border:1px solid var(--develop-orange);background:var(--develop-orange);color:#fff}
.develop-button--primary:hover{background:#e94d15;border-color:#e94d15}
.develop-button--secondary{border:1px solid var(--develop-line);background:#fff;color:#222}
.develop-button--secondary:hover{border-color:#ffd2c0;background:#fff8f5;color:var(--develop-orange)}
.develop-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:920px;margin:34px auto 0}
.develop-tags span{padding:9px 13px;border:1px solid var(--develop-line);border-radius:999px;background:#fff;color:#595955;font-size:11.5px;font-weight:600}

/* Shared sections */
.develop-section{padding:104px 0;border-bottom:1px solid var(--develop-line)}
.develop-section--soft{background:var(--develop-soft)}
.develop-section--dark{background:#f6f6f3;color:var(--develop-text);border-bottom-color:var(--develop-line)}
.develop-section-head{max-width:900px;margin:0 auto 48px}
.develop-section-head .eyebrow{margin-bottom:18px}
.develop-section-head h2{max-width:800px;margin:0 auto;font-size:clamp(34px,3.3vw,50px);font-weight:630;line-height:1.16;letter-spacing:-.045em;word-break:keep-all;text-wrap:balance}
.develop-section-head>p:last-child{max-width:720px;margin:20px auto 0;color:var(--develop-muted);font-size:15.5px;line-height:1.8;word-break:keep-all}
.develop-section--dark .develop-section-head>p:last-child{color:var(--develop-muted)}
.develop-section--dark .eyebrow{color:var(--develop-orange)!important}

/* Problem cards */
.develop-problem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--develop-card-gap)}
.develop-problem-grid article{min-height:260px;padding:25px;border:var(--develop-card-border);border-radius:var(--develop-card-radius);background:#fff;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.develop-problem-grid article:hover{transform:translateY(-2px);border-color:#ffd2c0;background:#fffaf7}
.develop-problem-grid span{color:var(--develop-orange);font-size:10px;font-weight:700;letter-spacing:.08em}
.develop-problem-grid h3{margin:56px 0 12px;font-size:21px;font-weight:620;line-height:1.35;letter-spacing:-.03em;word-break:keep-all}
.develop-problem-grid p{margin:0;color:#666;font-size:13.5px;line-height:1.72;word-break:keep-all}

/* Services */
.develop-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--develop-card-gap)}
.develop-service-grid article{position:relative;min-height:360px;padding:26px;border:var(--develop-card-border);border-radius:var(--develop-card-radius);background:#fff;overflow:hidden}
.develop-service-no{color:var(--develop-orange);font-size:10px;font-weight:700}
.develop-service-icon{position:absolute;top:22px;right:22px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--develop-orange-soft);color:var(--develop-orange);font-size:15px;font-weight:700}
.develop-service-grid h3{margin:76px 0 4px;font-size:23px;font-weight:650;letter-spacing:-.035em}
.develop-service-grid strong{display:block;color:#60605c;font-size:13px;font-weight:600}
.develop-service-grid p{margin:22px 0 0;color:#686864;font-size:13.5px;line-height:1.75;word-break:keep-all}
.develop-service-grid small{position:absolute;right:26px;bottom:24px;left:26px;padding-top:15px;border-top:1px solid var(--develop-line);color:#999994;font-size:9.5px;font-weight:700;letter-spacing:.06em}

/* Difference */
.develop-difference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--develop-card-gap);overflow:visible;border:0;background:transparent}
.develop-difference-grid article{position:relative;min-height:270px;padding:28px;border:1px solid var(--develop-line);border-radius:var(--develop-card-radius);background:#fff;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.develop-difference-grid article::before{position:absolute;top:0;right:0;left:0;height:3px;background:var(--develop-orange);content:'';opacity:.9}
.develop-difference-grid article:hover{transform:translateY(-2px);border-color:#ffd2c0;box-shadow:0 14px 34px rgba(25,25,20,.055)}
.develop-difference-grid span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--develop-orange-soft);color:var(--develop-orange);font-size:10px;font-weight:700;letter-spacing:.07em}
.develop-difference-grid h3{margin:58px 0 12px;font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-.03em;word-break:keep-all}
.develop-difference-grid p{margin:0;color:#6b6b67;font-size:13px;line-height:1.75;word-break:keep-all}

/* Process */
.develop-process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--develop-card-gap);overflow:visible;border:0;background:transparent}
.develop-process article{min-height:240px;padding:24px;border:var(--develop-card-border);border-radius:var(--develop-card-radius);background:#fff}
.develop-process span{color:var(--develop-orange);font-size:10px;font-weight:700}
.develop-process h3{margin:58px 0 10px;font-size:19px;font-weight:620}
.develop-process p{margin:0;color:#686864;font-size:12.5px;line-height:1.7;word-break:keep-all}

/* Function grid */
.develop-function-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:1100px;margin:0 auto}
.develop-function-grid span{display:flex;min-height:74px;align-items:center;justify-content:center;padding:10px;border:var(--develop-card-border);border-radius:16px;background:#fff;color:#40403d;font-size:12px;font-weight:650;text-align:center;transition:background .18s ease,border-color .18s ease,color .18s ease}
.develop-function-grid span:hover{border-color:#ffd2c0;background:#fff7f2;color:var(--develop-orange)}

/* Work */
.develop-work{padding-top:104px;padding-bottom:104px}
.develop-work__head--center{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:18px!important;margin-bottom:48px!important;text-align:center}
.develop-work__head--center>div:first-child{display:flex;flex-direction:column;align-items:center}
.develop-work__head--center h2{max-width:760px!important;margin:0 auto!important;font-size:clamp(34px,3.3vw,50px)!important;font-weight:630!important;line-height:1.16!important;letter-spacing:-.045em!important;text-align:center}
.develop-work__head--center .develop-work__intro{max-width:700px!important;justify-self:auto!important;text-align:center}
.develop-work__head--center .develop-work__intro p{font-size:14px;line-height:1.75;color:#6a6a66}
.develop-work__head--center .develop-work__intro .text-link{margin-top:16px}
.develop-work__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--develop-card-gap)}
.develop-work-card{min-width:0}
.develop-work-card__link{display:block;min-height:250px;height:100%;padding:24px;border:var(--develop-card-border);border-radius:var(--develop-card-radius);background:#fff;color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.develop-work-card__link:hover{transform:translateY(-2px);border-color:#ffd2c0;background:#fffaf7}
.develop-work-card__media{display:none!important}
.develop-work-card__meta{display:flex;min-height:200px;height:100%;flex-direction:column;text-align:left}
.develop-work-card__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.develop-work-card__label{color:var(--develop-orange);font-size:9.5px;font-weight:700;line-height:1.4;letter-spacing:.08em}
.develop-work-card__arrow{font-size:15px;line-height:1;color:#202020}
.develop-work-card__body{margin-top:54px}
.develop-work-card__title{margin:0;font-size:22px;line-height:1.24;letter-spacing:-.035em;font-weight:630;word-break:keep-all}
.develop-work-card__copy{margin:9px 0 0;color:#70706b;font-size:12.5px;line-height:1.65;word-break:keep-all}
.develop-work-card__tag{display:inline-block;margin-top:auto;padding-top:28px;color:var(--develop-orange);font-size:9.5px;font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase}

/* FAQ */
.develop-faq{display:grid;gap:10px;max-width:920px;margin:0 auto;border-top:0}
.develop-faq details{padding:0 22px;border:var(--develop-card-border);border-radius:16px;background:#fff;overflow:hidden}
.develop-faq summary{display:flex;min-height:72px;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;letter-spacing:-.02em}
.develop-faq summary::-webkit-details-marker{display:none}
.develop-faq summary span{color:var(--develop-orange);font-size:20px;font-weight:400}
.develop-faq details[open] summary span{transform:rotate(45deg)}
.develop-faq details p{max-width:760px;margin:0 0 24px;color:#666;font-size:13.5px;line-height:1.78;word-break:keep-all}

/* Final CTA */
.develop-cta{padding:110px 0;background:var(--develop-orange);color:#fff}
.develop-cta .eyebrow{color:rgba(255,255,255,.72)!important}
.develop-cta h2{max-width:780px;margin:0 auto;font-size:clamp(38px,3.8vw,58px);font-weight:650;line-height:1.12;letter-spacing:-.05em;word-break:keep-all;text-wrap:balance}
.develop-cta p{max-width:700px;margin:24px auto 0;color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.8;word-break:keep-all}
.develop-button--light{margin-top:32px;border:1px solid #fff;background:#fff;color:var(--develop-orange)}
.develop-button--light:hover{background:#fff7f3;border-color:#fff7f3}

/* Responsive */
@media(max-width:1100px){
  .develop-problem-grid,.develop-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .develop-difference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .develop-process{grid-template-columns:repeat(3,minmax(0,1fr))}
  .develop-function-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .develop-work__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .develop-hero{padding:68px 0 56px}
  .develop-hero h1{font-size:clamp(38px,10.5vw,50px)}
  .develop-hero__lead{font-size:16px}
  .develop-actions{flex-direction:column;align-items:stretch}
  .develop-button{width:100%}
  .develop-tags{gap:6px}
  .develop-tags span{font-size:10.5px}
  .develop-section{padding:76px 0}
  .develop-section-head{margin-bottom:34px}
  .develop-section-head h2{font-size:clamp(30px,8vw,38px)}
  .develop-problem-grid,.develop-service-grid,.develop-difference-grid,.develop-process,.develop-work__grid{grid-template-columns:1fr}
  .develop-problem-grid article,.develop-service-grid article,.develop-difference-grid article,.develop-process article{min-height:0}
  .develop-problem-grid h3,.develop-service-grid h3,.develop-difference-grid h3,.develop-process h3{margin-top:34px}
  .develop-service-grid article{padding-bottom:78px}
  .develop-function-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .develop-work{padding-top:76px;padding-bottom:76px}
  .develop-cta{padding:82px 0}
}